<template>
  <div
    class="logo-box ht-56 fx-ct-ct ts-al"
    :class="[
      { 'wd-60 pd-rt-0': keyCollapse },
      { 'wd-235 pd-rt-56': !keyCollapse },
    ]"
  >
    <img class="logo" src="~@/assets/common/logo.png" />
    <template v-if="!keyCollapse">
      <img class="logo-name" src="~@/assets/common/logo_name.png" />
      <span class="cr-wt-7 px-4 ft-8 bd-77f-1 bd-rd-2">{{ envLabel }}</span>
    </template>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "LogoBox",
  computed: {
    ...mapGetters(["keyCollapse"]),
    envLabel() {
      const envObject = {
        PROD: this.$t("envLabel.prod"),
        TEST: this.$t("envLabel.test"),
        DEV: this.$t("envLabel.dev"),
        UAT: this.$t("envLabel.uat"),
      };
      return (
        envObject[process.env.VUE_APP_RUN_MODE] || this.$t("envLabel.test")
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.logo-box {
  background: transparent url("~@/assets/common/logo_bg.png") no-repeat;
  background-size: cover;
  .logo {
    height: 36px;
    width: 36px;
    object-fit: contain;
  }
  .logo-name {
    margin: 0 8px;
    width: 56px;
    height: 20px;
    object-fit: contain;
  }
}
</style>
